<template>
  <transition name="list-fade">
		<!-- 最外层 -->
    <div class="playlist" @click="hide" v-show="showFlag">
			<!-- 内容层 -->
      <div class="list-wrapper" @click.stop>
        <div class="list-header">
          <h1 class="title">
            <i class="icon" :class="iconMode" @click="changeMode" ></i>
            <span class="text"> {{modeText}}</span>
            <span class="clear" @click="showConfirm"><i class="icon-clear"></i></span>
          </h1>
        </div>
				<!-- 列表 -->
        <scroll  ref="listContent" :dataA="sequenceList" class="list-content" :refreshDelay="refreshDelay">
          <transition-group ref="list" name="list" tag="ul">
            <li :key="item.id" class="item" v-for="(item,index) in sequenceList"
                @click="selectItem(item,index)">
								<!-- 当前歌手播放的样式 -->
              <i class="current" :tiel="item.mid" :class="getCurrentIcon(item)"></i>
              <span class="text">{{item.name}}</span>
							<!-- 喜欢 -->
              <span @click.stop="toggleFavorite(item)" class="like">
                <i :class="getFavoriteIcon(item)"></i>
              </span>
              <span @click.stop="deleteOne(item)" class="delete">
                <i class="icon-delete"></i>
              </span>
            </li>
          </transition-group>
        </scroll>
				<!-- 添加歌曲到队列 -->
        <div class="list-operate">
          <div @click="addSong" class="add">
            <i class="icon-add"></i>
            <span class="text">添加歌曲到队列</span>
          </div>
        </div>
        <div @click="hide" class="list-close">
          <span>关闭</span>
        </div>
      </div>
      <confirm ref="confirm" @confirm="confirmClear" text="是否清空播放列表" confirmBtnText="清空"></confirm>
			<!-- 添加喜欢歌曲列表 sos-->
			<add-song ref="addSong"></add-song>
    </div>
  </transition>
</template>

<script>
import {mapGetters, mapMutations, mapActions} from 'vuex'
import {playMode} from 'common/js/config'
import Scroll from 'base/scroll/scroll'
import Confirm from 'base/confirm/confirm'
import AddSong from 'components/add-song/add-song'
import {playerMixin,playpop} from 'common/js/mixin'
export default {
  name: 'playlist',
	mixins: [playerMixin],
	data() {
		return {
			showFlag: false,
			refreshDelay: 120
		}
	},
	 computed: {
      modeText() {
        return this.mode === playMode.sequence ? '顺序播放' : this.mode === playMode.random ? '随机播放' : '单曲循环'
      },
    },
    methods: {
      show() {//打开
        this.showFlag = true
        setTimeout(() => {//解决dDom正确渲染
          this.$refs.listContent.refresh()
          this.scrollToCurrent(this.currentSong)
        }, 20)
      },
      hide() {//关闭
        this.showFlag = false
      },
      showConfirm() {//出现弹窗
        this.$refs.confirm.show()
      },
      confirmClear() {//清空数据
        this.deleteSongList()
        this.hide()
      },
			getFavoriteIcon(song) {
				if (this.isFavorite(song)) {
					return 'icon-favorite'
				}
				return 'icon-not-favorite'
			},
			isFavorite(song) {
				const index = this.favoriteList.findIndex((item) => {
					return item.id === song.id
				})
				return index > -1
			},
      getCurrentIcon(item) {//当前歌手播放的样式
					
				if(this.$route.path.includes("rank")){
						if (this.currentSong.id === item.mid) {
							return 'icon-play'
						}else{
							return ''
						}
						console.log("this.currentSong.id",this.currentSong.id,item.mid)
				}else{
					if (this.currentSong.id === item.id) {
						return 'icon-play'
					}
					return ''
				}
      },
      selectItem(item, index) {//点击列表播放 
        if (this.mode === playMode.random) {//随机播放模式
          index = this.playlist.findIndex((song) => {
            return song.id === item.id
          })
        }
        this.setCurrentIndex(index)
				this.CURRENTSONG(this.sequenceList[index])
        this.setPlayingState(true)
      },
      scrollToCurrent(current) {//滚动到当前播放的列表
			 let index=""
				if(this.$route.path.includes("rank")){
					index = this.sequenceList.findIndex((song) => {return current.id === song.mid})
				}else{
					index = this.sequenceList.findIndex((song) => {return current.id === song.id})	
				}
				this.$refs.listContent.scrollToElement(this.$refs.list.$el.children[index], 300)

//         const index = this.sequenceList.findIndex((song) => {
//           return current.id === song.id
//         })
//         this.$refs.listContent.scrollToElement(this.$refs.list.$el.children[index], 300)
      },
      deleteOne(item) {//删除歌曲
        this.deleteSong(item)
        if (!this.playlist.length) {//没有列表数据的处理
          this.hide()
        }
      },
      addSong() { //切换喜欢歌曲列表
        this.$refs.addSong.show()
      },
      ...mapActions([
        'deleteSong',
        'deleteSongList'
      ])
    },
    watch: { //监听滚动条滚动到什么位置
      currentSong(newSong, oldSong) {//下拉列表不显示 或者id想等
        if (!this.showFlag || newSong.id === oldSong.id) {
          return
        }
        setTimeout(() => {
          this.scrollToCurrent(newSong)
        }, 20)
      },
			currentIndex(newSong, oldSong) {
				console.log("okkm")
			}
    },
    components: {
      Scroll,
      Confirm,
      AddSong
    }  
}
</script>

<style lang="scss" scoped >
.playlist{
	@include qunp();
	z-index: 998;
	background-color: $color-background-d;
	&.list-fade-enter-active, &.list-fade-leave-active{
		transition: opacity 0.3s;
		.list-wrapper{
			transition: all 0.3s;
		}
	}
	&.list-fade-enter, &.list-fade-leave-to{
		opacity: 0;
		.list-wrapper{
			transform: translate3d(0, 100%, 0);
		}
	}
	&.list-fade-enter{}
	.list-wrapper{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: $color-highlight-background;
		.list-header{
			position: relative;
			padding: 20px 30px 10px 20px;
			.title{
				display: flex;
				align-items: center;
				.icon{
					margin-right: 10px;
					font-size: 30px;
					color: $color-theme-d;
				}
				.text{
					flex: 1;
					font-size: $font-size-medium;
					color: $color-text-l;
				}
				.clear{
						@include extend-click()
            .icon-clear{
              font-size: $font-size-medium;
              color: $color-text-d;
						}
				}
				
			}
			
		}
		.list-content{
			max-height: 240px;
			overflow: hidden;
			.item{
          display: flex;
          align-items: center;
          height: 40px;
          padding: 0 30px 0 20px;
          overflow: hidden;
          &.list-enter-active, &.list-leave-active{
            transition: all 0.1s;
					}
          &.list-enter, &.list-leave-to{
            height: 0;
					}
					.current{
            flex: 0 0 20px;
            width: 20px;
            font-size: $font-size-small;
            color: $color-theme-d;
					}
          .text{
            flex: 1;
            @include no-wrap();
            font-size: $font-size-medium;
            color: $color-text-d;
					}
					.like{
            @include extend-click();
            margin-right: 15px;
            font-size: $font-size-small;
            color: $color-theme;
            .icon-favorite{
              color: $color-sub-theme;
						}
					}
          .delete{
            @include extend-click();
            font-size: $font-size-small;
            color: $color-theme;
					}
			}
		}
		.list-operate{
			width: 140px;
			margin: 20px auto 30px auto;
			.add{
				display: flex;
				align-items: center;
				padding: 8px 16px;
				border: 1px solid $color-text-l;
				border-radius: 100px;
				color: $color-text-l;
				.icon-add{
					margin-right: 5px;
					font-size: $font-size-small-s;
				}
				.text{
					font-size: $font-size-small;
				}
			}
			
		}
		
		.list-close{
			text-align: center;
			line-height: 50px;
			background: $color-background;
			font-size: $font-size-medium-x;
			color: $color-text-l;
		}
	}
	
	
	
}
   
</style>